<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>潮鞋盲盒抽奖</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
        }

        .container {
            max-width: 414px;
            margin: 0 auto;
            background-color: #fff;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
            padding-bottom: 50px; /* 给底部导航留出空间 */
        }

        /* 顶部导航 */
        .header {
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: linear-gradient(135deg, #ff3366, #ff6633);
            color: white;
            font-weight: bold;
        }

        .header .back {
            position: absolute;
            left: 15px;
            font-size: 20px;
        }

        /* 盲盒展示区 */
        .box-showcase {
            padding: 20px;
            text-align: center;
        }

        .box-image {
            width: 200px;
            height: 200px;
            margin: 0 auto 15px;
            position: relative;
            perspective: 1000px;
        }

        .box-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.5s;
        }

        .box-image:hover img {
            transform: rotateY(20deg);
        }

        .box-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .box-price {
            color: #ff3366;
            font-weight: bold;
            font-size: 16px;
        }

        .box-desc {
            color: #999;
            font-size: 12px;
            margin: 10px 0;
        }

        /* 抽奖按钮 */
        .draw-btn {
            background: linear-gradient(135deg, #ff3366, #ff6633);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 12px 30px;
            font-size: 16px;
            font-weight: bold;
            margin: 20px auto;
            display: block;
            box-shadow: 0 4px 10px rgba(255, 51, 102, 0.3);
            cursor: pointer;
            transition: transform 0.2s;
        }

        .draw-btn:active {
            transform: scale(0.95);
        }

        /* 奖品展示 */
        .prize-list {
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            justify-content: space-around;
        }

        .prize-item {
            width: 30%;
            margin-bottom: 15px;
            text-align: center;
            background: #fff;
            border-radius: 8px;
            padding: 10px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }

        .prize-item img {
            width: 80px;
            height: 80px;
            object-fit: contain;
            margin-bottom: 5px;
        }

        .prize-item .name {
            font-size: 12px;
            margin-bottom: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .prize-item .probability {
            color: #999;
            font-size: 10px;
        }

        /* 抽奖结果弹窗 */
        .result-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }

        .result-content {
            background-color: white;
            width: 80%;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            animation: zoomIn 0.3s;
        }

        @keyframes zoomIn {
            from { transform: scale(0.5); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        .result-image {
            width: 150px;
            height: 150px;
            margin: 0 auto 15px;
        }

        .result-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .result-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .result-desc {
            color: #666;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .result-btns {
            display: flex;
            justify-content: space-around;
        }

        .result-btn {
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
        }

        .result-btn.primary {
            background: linear-gradient(135deg, #ff3366, #ff6633);
            color: white;
            border: none;
        }

        .result-btn.default {
            background: #f5f5f5;
            color: #666;
            border: none;
        }

        /* 底部导航 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50px;
            background-color: white;
            display: flex;
            border-top: 1px solid #eee;
            max-width: 414px;
            margin: 0 auto;
        }

        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #999;
            font-size: 12px;
            cursor: pointer;
        }

        .tab-item.active {
            color: #ff3366;
        }

        .tab-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }

        /* 页面内容 - 默认隐藏 */
        .page-content {
            display: none;
        }

        .page-content.active {
            display: block;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 顶部导航 -->
    <div class="header">
        <div class="back">←</div>
        <div>潮鞋盲盒抽奖</div>
    </div>

    <!-- 抽奖首页 -->
    <div class="page-content active" id="homePage">
        <!-- 盲盒展示区 -->
        <div class="box-showcase">
            <div class="box-image">
                <!--<img src="https://placehold.co/200x200/ff3366/white?text=潮鞋盲盒" alt="潮鞋盲盒">-->
                <img src="images/white.svg" alt="潮鞋盲盒">
            </div>
            <div class="box-name">限量潮鞋盲盒</div>
            <div class="box-price">¥99/次</div>
            <div class="box-desc">内含AJ、Yeezy等热门潮鞋，稀有款概率公示</div>
            <button class="draw-btn" id="drawBtn">立即抽奖</button>
        </div>

        <!-- 奖品展示 -->
        <h3 style="padding: 10px 15px; border-bottom: 1px solid #eee;">可能获得的奖品</h3>
        <div class="prize-list">
            <div class="prize-item">
                <!--<img src="https://placehold.co/80x80/333/white?text=AJ1" alt="AJ1">-->
                <img src="images/AJ1.svg" alt="AJ1">
                <div class="name">Air Jordan 1 Retro</div>
                <div class="probability">概率: 5%</div>
            </div>
            <div class="prize-item">
                <!--<img src="https://placehold.co/80x80/333/white?text=Yeezy" alt="Yeezy">-->
                <img src="images/Yeezy.svg" alt="Yeezy">
                <div class="name">Yeezy Boost 350</div>
                <div class="probability">概率: 10%</div>
            </div>
            <div class="prize-item">
                <!--<img src="https://placehold.co/80x80/333/white?text=Dunk" alt="Dunk">-->
                <img src="images/Dunk.svg" alt="Dunk">
                <div class="name">Nike Dunk Low</div>
                <div class="probability">概率: 15%</div>
            </div>
            <div class="prize-item">
                <!--<img src="https://placehold.co/80x80/333/white?text=AF1" alt="AF1">-->
                <img src="images/AF1.svg" alt="AF1">
                <div class="name">Air Force 1</div>
                <div class="probability">概率: 20%</div>
            </div>
            <div class="prize-item">
                <!--<img src="https://placehold.co/80x80/333/white?text=Converse" alt="Converse">-->
                <img src="images/Converse.svg" alt="Converse">
                <div class="name">Converse Chuck 70</div>
                <div class="probability">概率: 25%</div>
            </div>
            <div class="prize-item">
                <!--<img src="https://placehold.co/80x80/333/white?text=Vans" alt="Vans">-->
                <img src="images/Vans.svg" alt="Vans">
                <div class="name">Vans Old Skool</div>
                <div class="probability">概率: 25%</div>
            </div>
        </div>
    </div>

    <!-- 我的盲盒页面 -->
    <div class="page-content" id="myBoxPage">
        <div style="padding: 20px; text-align: center;">
            <h3>我的盲盒</h3>
            <p style="margin-top: 20px; color: #999;">您还没有任何盲盒记录</p>
        </div>
    </div>

    <!-- 奖品墙页面 -->
    <div class="page-content" id="prizeWallPage">
        <div style="padding: 20px; text-align: center;">
            <h3>奖品墙</h3>
            <p style="margin-top: 20px; color: #999;">所有可能获得的潮鞋款式</p>
            <!-- 这里可以展示所有奖品 -->
        </div>
    </div>

    <!-- 个人中心页面 -->
    <div class="page-content" id="profilePage">
        <div style="padding: 20px; text-align: center;">
            <h3>个人中心</h3>
            <div style="width: 80px; height: 80px; border-radius: 50%; background: #eee; margin: 20px auto;"></div>
            <p style="margin: 10px 0;">用户名</p>
            <p style="color: #999; margin-bottom: 20px;">账户余额: ¥0</p>
        </div>
    </div>

    <!-- 抽奖结果弹窗 -->
    <div class="result-modal" id="resultModal">
        <div class="result-content">
            <div class="result-image">
                <img src="images/AJ1.svg" alt="中奖奖品">
            </div>
            <div class="result-title">恭喜获得!</div>
            <div class="result-desc">Air Jordan 1 Retro 芝加哥配色</div>
            <div class="result-btns">
                <button class="result-btn default" id="closeResult">再抽一次</button>
                <button class="result-btn primary" id="viewDetail">查看详情</button>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="tab-bar">
        <div class="tab-item active" data-page="homePage">
            <div class="tab-icon">🎁</div>
            <div>抽奖</div>
        </div>
        <div class="tab-item" data-page="myBoxPage">
            <div class="tab-icon">📦</div>
            <div>我的盲盒</div>
        </div>
        <div class="tab-item" data-page="prizeWallPage">
            <div class="tab-icon">🏆</div>
            <div>奖品墙</div>
        </div>
        <div class="tab-item" data-page="profilePage">
            <div class="tab-icon">👤</div>
            <div>我的</div>
        </div>
    </div>
</div>

<script>
    // 抽奖功能
    document.getElementById('drawBtn').addEventListener('click', function() {
        // 显示抽奖结果弹窗
        document.getElementById('resultModal').style.display = 'flex';

        // 这里可以添加抽奖动画和实际抽奖逻辑
    });

    document.getElementById('closeResult').addEventListener('click', function() {
        document.getElementById('resultModal').style.display = 'none';
    });

    document.getElementById('viewDetail').addEventListener('click', function() {
        alert('跳转到奖品详情页');
        document.getElementById('resultModal').style.display = 'none';
    });

    // 底部导航切换功能
    const tabItems = document.querySelectorAll('.tab-item');
    const pageContents = document.querySelectorAll('.page-content');

    tabItems.forEach(item => {
        item.addEventListener('click', function() {
            // 移除所有active类
            tabItems.forEach(tab => tab.classList.remove('active'));
            pageContents.forEach(page => page.classList.remove('active'));

            // 给当前点击的tab添加active类
            this.classList.add('active');

            // 显示对应的页面内容
            const pageId = this.getAttribute('data-page');
            document.getElementById(pageId).classList.add('active');
        });
    });
</script>
</body>
</html>
